<template>
  <div class="index-container">
    <div class="navBar">
      <van-nav-bar title="个人资料" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="icon-wrapper">
      <img src="@/assets/drawable-mdpi/heyteaIcon.png" alt="" />
    </div>
    <div class="form-wrapper">
      <van-form @submit="onSubmit">
        <!-- 输入框昵称 -->
        <van-field
          v-model="username"
          name="昵称"
          label="昵称"
          placeholder="请输入昵称"
          :rules="[{ required: true, message: '请填写昵称' }]"
        />
        <!-- 单选框 性别 -->
        <van-field name="radio" label="性别">
          <template #input>
            <van-radio-group v-model="radio" direction="horizontal">
              <van-radio name="1">男</van-radio>
              <van-radio name="2">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <!-- 时间选择器 生日 -->
        <van-field
          readonly
          clickable
          name="datetimePicker"
          :value="value"
          label="生日"
          placeholder="点击选择出生日期"
          @click="showPicker = true"
        />
        <!-- 时间选择器 弹出框 -->
        <van-popup v-model="showPicker" position="bottom">
          <van-datetime-picker
            v-model="currentDate"
            type="date"
            title="选择年月日"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="onConfirm"
            @cancel="showPicker = false"
            :formatter="formatter"
          />
        </van-popup>
        <!-- 级联选择器 选择地区 -->
        <van-field
          readonly
          clickable
          name="area"
          :value="address"
          label="所在地区"
          placeholder="点击选择省市区"
          @click="showArea = true"
        />
        <van-popup v-model="showArea" position="bottom">
          <van-area
            :area-list="areaList"
            @confirm="adressConfirm"
            @cancel="showArea = false"
          />
        </van-popup>
        <!-- 文件上传 上传头像 -->
        <van-field name="uploader" label="上传头像">
          <template #input>
            <van-uploader v-model="uploader" :max-count="1" />
          </template>
        </van-field>
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { NavBar } from "vant";
import Vue from "vue";
import { Form } from "vant";
import { Field } from "vant";
import { RadioGroup, Radio } from "vant";
import { Button } from "vant";
import { DatetimePicker } from "vant";
import { Popup } from "vant";
import { Area } from "vant";
import { Uploader } from "vant";

Vue.use(Uploader);
Vue.use(Area);
Vue.use(Popup);
Vue.use(DatetimePicker);
Vue.use(Button);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Form);
Vue.use(Field);
Vue.use(NavBar);
export default {
  data() {
    return {
      username: "",
      radio: "",
      value: null,
      showPicker: false,
      showArea: false,
      minDate: new Date(1980, 0, 1),
      maxDate: new Date(2030, 12, 31),
      currentDate: "",
      address: "",
      areaList: {
        province_list: {
          110000: "北京市",
          120000: "天津市",
        },
        city_list: {
          110100: "北京市",
          120100: "天津市",
        },
        county_list: {
          110101: "东城区",
          110102: "西城区",
        },
      },
      uploader: [],
    };
  },

  components: {},

  methods: {
    //表头返回上一级
    onClickLeft() {
      this.$router.go(-1);
    },
    onConfirm(val) {
      console.log(this.formatDate(val));
      this.value = this.formatDate(val);
      this.showPicker = false;
      console.log(this.value);
    },
    formatDate(datetime) {
      // 获取年⽉⽇时分秒值  slice(-2)过滤掉⼤于10⽇期前⾯的0 Date Math
      var year = datetime.getFullYear(),
        month = ("0" + (datetime.getMonth() + 1)).slice(-2),
        date = ("0" + datetime.getDate()).slice(-2);
      // 拼接
      var result =
        year +
        "-" +
        month +
        "-" +
        date 
      // 返回
      return result;
    },
    //转换时间格式
    formatter(type, val) {
      if (type === "year") {
        return `${val}年`;
      } else if (type === "month") {
        return `${val}月`;
      } else if (type === "day") {
        return `${val}日`;
      }
      return val;
    },
    //表单提交
    onSubmit() {
      console.log("提交");
    },
    adressConfirm(values) {
      this.address = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join("/");
      this.showArea = false;
    },
  },
};
</script>

<style scoped>
::v-deep .van-icon-arrow-left:before {
  color: #000;
}
.index-container .icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  margin-top: 10px;
}
.index-container .icon-wrapper img {
  width: 100px;
  height: 100px;
}
.index-container .form-wrapper {
  width: 100%;
  margin-top: 10px;
  background-color: #fff;
}
</style>